<template>
  <a-card class="result-success" :bordered="false">
    <div class="top_box dsp_flex">
      <div class="avatar_div">
        <a-avatar :size="64" style="background: #3370FFFF;">{{pageData.name}}</a-avatar>
      </div>

      <div class="infos">
        <div class="dsp_flex">
          <h2 style="margin: 0 30px 0 0">{{pageData.name}}</h2>

          <a-tag v-if="pageData.socialArchives" :color="colorFilter(pageData.socialArchives.status)">
            {{pageData.socialArchives.status | statusFilter}}
          </a-tag>
          <!-- <a-tag color="#FA541C" v-if="pageData.socialArchives">{{pageData.socialArchives.status | statusFilter}}</a-tag> -->

          <a-tag v-if="pageData.fundArchives" :color="colorFilter(pageData.fundArchives.status)">
            {{pageData.fundArchives.status | statusFilter}}
          </a-tag>
          <!-- <a-tag color="#1890FF" v-if="pageData.fundArchives">{{pageData.fundArchives.status | statusFilter}}</a-tag> -->

          <!-- <a-space class="btn_div">
            <a-button type="primary">补缴</a-button>
            <a-button type="primary">调基</a-button>
          </a-space> -->
        </div>

        <p class="c_a2 dsp_flex desc_p" v-if="pageData.projectName && pageData.contract && pageData.contract">
          <span v-if="pageData.projectName">{{pageData.projectName}}</span>
          <a-divider type="vertical" v-if="pageData.projectName" />
          <span v-if="pageData.contract">{{pageData.contract ? pageData.contract.deptName : ''}}</span>
          <a-divider type="vertical" v-if="pageData.contract" />
          <span v-if="pageData.contract">{{pageData.contract.postName}}</span>
        </p>

        <div class="basicInfo_div">
          <a-row>
            <a-col :span="8" v-if="pageData.mobile">
              <p>手机: <span>{{pageData.mobile}}</span></p>
            </a-col>
            <a-col :span="8" v-if="pageData.wechatResponse">
              <p>微信: <span>{{pageData.wechatResponse.wechatName}}</span></p>
            </a-col>
            <a-col :span="8" v-if="pageData.email">
              <p>邮箱: <span>{{pageData.email}}</span></p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>

    <div class="tabs_div">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="社保公积金档案">
          <Tab1 :tabdata="pageData" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="服务记录">
          <Tab2 />
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-card>
</template>
  
<script>
import Tab1 from './detailTabs/tab1'
import Tab2 from './detailTabs/tab2'
import { getSocialInfoByIdApi } from '@/services/socialSecurityFund'

export default {
  name: 'socialSecurityFundDetail',
  props: ['id'],
  components: { Tab1, Tab2 },
  filters: {
    statusFilter (str) {
      // switch (str) {
      //   case 'adding':
      //     return '增员中'
      //   case 'UnEntry':
      //     return '待入职'
      //   case 'OnJob':
      //     return '在职'
      //   case 'UnDimission':
      //     return '待离职'
      //   case 'Dimission':
      //     return '已离职'
      //   case 'Expired':
      //     return '已失效'
      // }

      switch (str) {
        case 'adding':
          return '增员中'
        case 'cutting':
          return '减员中'
        case 'online':
          return '在缴'
        case 'offline':
          return '不在缴'
        case 'UnEntry':
          return '待入职'
        case 'OnJob':
          return '在职'
        case 'UnDimission':
          return '待离职'
        case 'Dimission':
          return '已离职'
        case 'Expired':
          return '已失效'
        case 'creating':
          return '待创建'
        default:
          return '-'
      }
    }
  },
  data () {
    return {
      pageData: {}
    }
  },
  created () {
    if (this.id) {
      this.getDetail(this.id)
    }
  },
  methods: {
    getDetail (id) {
      getSocialInfoByIdApi({ id }).then(res => {
        let { code, msg, data } = res.data
        if (code === 200) {
          this.pageData = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    colorFilter (type) {
      switch (type) {
        case 'Supplement':
          return 'pink'
        case 'UnEntry':
          return 'orange'
        case 'OnJob':
          return 'blue'
        case 'UnDimission':
          return 'red'
        case 'Dimission':
          return 'red'
        case 'Expired':
          return 'red'
        case 'adding':
          return 'cyan'
        case 'cutting':
          return 'red'
        case 'online':
          return 'green'
        case 'offline':
          return 'purple'
        case 'creating':
          return 'blue'
      }
    }
  }
}
</script>
  
<style scoped lang='less'>
.infos {
  width: 100%;
  margin-left: 20px;
  & > div:first-of-type {
    align-items: center;
    justify-content: flex-start;
  }
}

.basicInfo_div {
  .c_a2();
  & > p {
    margin-bottom: 0;
  }
}

.tabs_div {
  margin-top: 20px;
}

.dsp_flex {
  display: flex;
  display: -webkit-flex;
}

.c_a2 {
  color: #a2a2a2;
}

.desc_p {
  align-items: center;
}

.btn_div {
  flex-grow: 1;
  .dsp_flex();
  justify-content: flex-end;
}
</style>